<template>
	<view>
		<u-navbar :title="data.name" title-color='#333333 ' title-bold>
		</u-navbar>
		<view class="carp">
			<text>收货人</text>
			<u-input v-model="form.name" :type="'text'" placeholder="请输入收货人" :clearable='false' />
		</view>
		<view class="carp">
			<text>联系电话</text>
			<u-input v-model="form.mobile" :type="'text'" placeholder="请输入收联系电话" :clearable='false' />
		</view>
		<view class="carp">
			<text>所在区域</text>
			<text @click="show1=true" style="width: 100%;margin-left:40rpx;">{{mydizhi?mydizhi:'请选择所在区域'}}</text>
			<!-- <text @click="show1=true" style="width: 100%;margin-left:40rpx;">请选择所在区域 </text> -->
			<!-- 	<u-input @input="input" v-model="form.province" :type="'text'" placeholder="请选择所在区域" :clearable='false' /> -->

		</view>
		<view class="carp1">
			<text>详细地址</text>
			<u-input v-model="form.address" :type="'text'" placeholder="请输入收详细地址" :clearable='false' />
			<image @click="maps" src="@/static/img/dzz.png" mode="widthFix"></image>
		</view>
		<view class="jiange">

		</view>
		<view class="carp" style="justify-content: space-between;">
			<view class="carp_1">
				<view class="text">设置为默认地址</view>
				<text class="text_1">提示：下单默认推荐使用改该地址</text>
			</view>
			<u-switch v-model="checked" size='40' :inactive-color="'rgba(204,204,204,0.6)'"
				active-color='rgb(25,190,107)'></u-switch>
		</view>
		<view class="bc" @click="submit">
			保存
		</view>
		<cityPicker :defaultValue="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel"
			:visible="visible" />
		<u-select @confirm='confirm0' mode="mutil-column-auto" v-model="show1" value-name='id' label-name='name'
			:list="listdizhi">
		</u-select>
	</view>
</template>

<script>
	import {
		dizzhi
	} from '@/config/setting.js'
	import cityPicker from '@/components/piaoyi-cityPicker/pioayi-cityPicker.vue'
	import QQMapWX from '@/untils/qqmap-wx-jssdk.min.js'

	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				info: {},
				id: '',
				show1: false,
				listdizhi: null,
				form: {
					id: '',
					name: '',
					address: '',
					mobile: '',
					province: '',
					city: '',
					county: '',
					is_default: '',
				},
				data: {},
				value: '',
				value3: '',
				text: '',
				checked: false,
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
			};
		},
		computed: {
			mydizhi() {
				if (this.form.province) {
					return this.form.province + ' ' + this.form.city + ' ' + this.form.county
				} else {
					return
				}

			},
		},
		methods: {
			confirm0(a, b) {
				this.form.province = a[0].label
				this.form.city = a[1].label
				this.form.county = a[2].label
			},

			//省市区
			input() {
				this.$api('common/province', this.form, 'get').then(res => {
					this.$toast(res.msg, 1)
				})
			},
			// 保存
			submit() {
				if (this.checked) {
					this.form.is_default = 1
				} else {
					this.form.is_default = 0
				}
				this.$api('usermsg/addressSave', this.form).then(res => {
					this.$toast(res.msg, 1)
					setTimeout(() => {
						uni.navigateBack({})
					}, 500)
				})
			},
			getinfo() {},
			maps() {
				uni.chooseLocation({
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						this.form.address = res.name
					},
					fail: (a) => {
						console.log(a);
					}
				});
			},
			map() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res, 123);
						let data = {
							lat: res.latitude,
							lng: res.longitude
						}
						// const index = this.adds.findIndex(x => x === res.address) // 返回结果  -1代表没有
						// if (index >= 0) {
						// 	this.adds.splice(index, 1) // 删除找到记录
						// }
						// this.adds.unshift(res.address) // 把input新值向数组开头添加
						// uni.setStorageSync('kw', this.adds)
						// this.bus.$emit('text', data)
						// uni.navigateBack()
						// this.getRegionFn(res);
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: (res) => {
								console.log(res);
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: "是否授权当前位置",
										content: "需要获取您的地理位置，请确认授权，否则地图功能将无法使用",
										success: (tip) => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: (data) => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data
															.authSetting[
																'scope.userLocation'
															] === true
														) {
															uni.showToast({
																title: "授权成功",
																icon: "success",
																duration: 1000
															})
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: (
																	res
																) => {
																	console
																		.log(
																			"详细地址",
																			res
																		);
																}
															})
														} else {
															uni.showToast({
																title: "授权失败",
																icon: "none",
																duration: 1000
															})
														}
													}
												})
											}
										}
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: "调用授权窗口失败",
									icon: "none",
									duration: 1000
								})
							}
						})
					}
				});


				// uni.navigateTo({
				// 	url:'./map'
				// })
			},
			confirm(val) {
				console.log(val)
				this.value3 = val.name
				// this.str = val
				this.visible = false
			},
			cancel() {
				this.visible = false
			},
			inputy() {
				console.log('测试')
				this.visible = true
			},
		},
		onLoad(a) {
			if (JSON.parse(a.data).name == '编辑地址') {
				this.$api('usermsg/userAddress', {
					address_id: a.id
				}).then(res => {
					this.form = res.data
					if (this.form.is_default == 1) {
						this.checked = true
					} else {
						this.checked = false
					}
				})
			}
			this.listdizhi = dizzhi[0].data
			this.getinfo()
			this.data = JSON.parse(a.data)
			if (this.form.is_default == 1) {
				this.checked = true
			} else {
				this.checked = false
			}

		}
	}
</script>

<style lang="scss">
	.bc {
		width: 300rpx;
		height: 88rpx;
		background: #FFD500;
		opacity: 1;
		border-radius: 44px;
		text-align: center;
		margin: 150rpx auto;
		line-height: 88rpx;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #703F00;
		opacity: 1;
	}

	.jiange {
		height: 20rpx;
		background-color: #F6F6F6;
	}

	.carp1 {
		width: 90%;
		margin: auto;
		padding: 30rpx 0rpx 30rpx 0rpx;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		text {
			width: 25%;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #333333;
			opacity: 1;
		}
	}

	.carp {
		width: 90%;
		margin: auto;
		border-bottom: 1rpx solid #EFEFEF;
		padding: 30rpx 0rpx 30rpx 0rpx;
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
		}

		.text_1 {
			position: relative;
			top: 10rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #666666;
			opacity: 1;
		}

		.text {
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #333333;
			opacity: 1;
		}

		text {
			width: 25%;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #333333;
			opacity: 1;
		}
	}
</style>
